import React, { Component } from 'react'
import Table from '../util/Table.jsx'
import ajax from '../util/ajax.js'
import { baseUrl } from '../util/constHelper.js'
import Model from '../util/Model.jsx'


const columns = [
	{
		title: '菜系类别',
		dataIndex: 'foodtype',
		key: 'foodtype',
		width: '150px'
	},
	{
		title: '菜品描述',
		dataIndex: 'description',
		key: 'description',
		width: '350px'
	},
	{
		title: '添加时间',
		dataIndex: 'createtime',
		key: 'createtime',
		width: '150px'
	}
]

let changeArr = []

export default class Classes extends Component {
	state = {
		classesList: [],
		current: 1,
		pageSize: 10,
		total: 0,
		isShow:false,
		changeObj:{}
	}

	componentDidMount() {
		this.getData()
	}

	getData = () => {
		ajax({
			url: baseUrl,
			method: "get",
			params: {
				transform: 1,
				order: 'id, desc',
				page: `${this.state.current},${this.state.pageSize}`
			},
			success: res => {
				this.setState({ 
					classesList: res.dc_caipinfenlei,
					total: res._results
				})
			}
		})
	}

	seatchFor=()=>{

	}

	saveData = (data) => {
		let method = 'post',
			url = baseUrl
		if (data.id) {
			method = 'put'
			url = baseUrl + '/' + data.id
		}
		ajax({
			url,
			method,
			data,
			success: res => {
				console.log('添加||修改成功')
				this.getData()
				this.hideForm()
			}
		})
	}

	deleteForm=()=>{
		if (changeArr.length === 0) return
		let delF = changeArr.map((va,ind)=>{
			return va.id
		}).join(',')

		ajax({
			url: baseUrl + '/' + delF,
			method:'delete',
			success: res => {
				console.log('删除成功')
				this.getData()
				this.hideForm()
			}
		})
	}

	hideForm =()=>{
		this.setState({ isShow:false})
	}
	showForm =(e)=>{
		if (e === 'update'){
			if (changeArr.length !== 1){
				alert('只能选择一项修改')
				return
			}
			this.setState({ changeObj: changeArr[0] })
		} else {
			this.setState({ changeObj: {} })
		}
		this.setState({ 
			isShow: true, 
			
		})
	}

	handleCheckbox = (a,e) => {
		if(e.target.checked){
			changeArr.push(a)
		} else {
			changeArr.map((ch,index)=>{
				if (ch.id === a.id){
					changeArr.splice(index,1)
				}
			})
		}
	}

	render() {

		const pagination = {
			handlePageChange: (page) => {
				console.log(page)
				this.setState({
					current : page
				},()=>{
					this.getData()
				})
			},
			current: this.state.current,
			pageSize: this.state.pageSize,
			total: this.state.total
		}

		return (
			<section className="content container-fluid">
				<section className="content-header no-padding">
					<h1>
						类别管理
            	<small>ED订餐管理系统</small>
					</h1>
					<ol className="breadcrumb no-padding">
						<li><a href=""><i className="fa fa-dashboard"></i> 首页</a></li>
						<li className="active">类别管理</li>
					</ol>
				</section>
				<div className="row " style={{ margin: "10px 0" }}>
					<div className="col-xs-4 no-padding">
						<div className="btn-group">
							<button onClick={this.showForm} type="button" className="btn btn-info">新增</button>
							<button onClick={this.showForm.bind(null,"update")} type="button" className="btn btn-warning">修改</button>
							<button onClick={this.deleteForm} type="button" className="btn btn-danger">删除</button>
						</div>
					</div>

					<div className="col-xs-4 col-xs-offset-4 no-padding">
						<div className="input-group input-group-sm">
							<input type="text" className="form-control" />
							<span className="input-group-btn">
								<button onClick={this.seatchFor} type="button" className="btn btn-info btn-flat">seatch</button>
							</span>
						</div>
					</div>
				</div>
				<Table
					dataSource={this.state.classesList}
					columns={columns}
					fixedHeader={true}
					handleCheckbox={this.handleCheckbox}
					pagination={pagination}
				/>
				<div>
					{this.state.isShow &&
						<Model
							saveData={this.saveData}
							hideForm={this.hideForm}
							changeObj={this.state.changeObj}
						/>}
				</div>
			</section>
		)
	}
}
